<template>
	<el-container>
	  <el-header class="header3">
		  <el-form :inline="true" :model="searchdata" class="demo-form-inline">
		    <el-form-item>
		      <el-input v-model="searchdata" placeholder="搜索" clearable="true"><el-button slot="append" @click="search" icon="el-icon-search"></el-button></el-input>
		    </el-form-item>
		  </el-form>
		  <el-dialog
		    title="查找"
		    :visible.sync="istrue3"
		    width="50%"
		    :before-close="handleClose">
		    <el-table
		        :data="search2"
		        border
		        style="width: 100%;"
		    	>
		    	<el-table-column
		    		prop="inventoryid"
		    		label="商品编号"
		    		width="50">
		    	</el-table-column>
		        <el-table-column
		          prop="inventoryname"
		          label="商品名称"
		          width="200">
		        </el-table-column>
		        <el-table-column
		          prop="inventorynum"
		          label="商品数量(件)"
		          width="100">
		        </el-table-column>
		        <el-table-column
		          prop="inventoryprice"
		          label="商品价格(元)"
		    				width="100">
		        </el-table-column>
		  				<el-table-column
		  					prop="dataofproduced"
		    		label="生产日期"
		    		width="200">
		    	</el-table-column>
		    	<el-table-column
		    		prop="databaozhi"
		    		label="保质期(天)"
		    		width="200">
		    	</el-table-column>
		    	<el-table-column
		    		prop="manufactory"
		    		label="厂商"
		    		width="300">
		    	</el-table-column>
		    	<el-table-column
		    		prop="inventoryaddress"
		    		label="生产地"
		    		width="300">
		    	 </el-table-column>
		  		<el-table-column
		  			label="操作"
		  			width="300">
		  			<template slot-scope="scope">
		  				<el-button type="primary" @click="update(scope.$index, scope.row)">修改</el-button>
		  				<el-button type="danger" @click="Delete(scope.$index, scope.row.inventoryid)">删除</el-button>
		  			</template>
		  				 					
		  		</el-table-column>
		      </el-table>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="istrue3 = false">确 定</el-button>
				</span>
		  </el-dialog>
	  </el-header>
	  <el-main class="main3">
		  <el-table
		      :data="inventorydate"
		      border
		      style="width: 100%;"
				>
		  		<el-table-column
					label="编号"
		  			type="index"
		  			width="50">
		  		</el-table-column>
		  		<el-table-column
		  			prop="inventoryid"
		  			label="商品编号"
		  			width="50">
		  		</el-table-column>
				<el-table-column
					prop="inventoryname"
					label="商品名称"
					width="200">
				</el-table-column>
				<el-table-column
					prop="inventorynum"
					label="商品数量(件)"
					width="100">
				</el-table-column>
				<el-table-column
					prop="inventoryprice"
					label="商品价格(元)"
		  			width="100">
				</el-table-column>
		  		<el-table-column
		  			prop="dataofproduced"
		  			label="生产日期"
		  			width="200">
		  		</el-table-column>
		  		<el-table-column
		  			prop="databaozhi"
		  			label="保质期(天)"
		  			width="200">
		  		</el-table-column>
		  		<el-table-column
		  			prop="manufactory"
		  			label="厂商"
		  			width="300">
		  		</el-table-column>
		  		<el-table-column
		  			prop="inventoryaddress"
		  			label="生产地"
		  			width="300">
		  		</el-table-column>
		  		<el-table-column
		  			label="操作"
		  			width="180">
		  			<template slot-scope="scope">
		  					
		  				<el-button type="primary" @click="update(scope.$index, scope.row)">修改</el-button>
		  				<el-button type="danger" @click="Delete(scope.$index, scope.row.inventoryid)">删除</el-button>
		  					
		  				<el-dialog
		  					title="修改"
		  					:visible.sync="istrue2"
		  					width="50%"
		  					:before-close="handleClose">
		  					<el-form ref="row" :model="row" label-width="100px">
		  					  	
		  					    <el-form-item label="商品名称" prop="inventoryname">
		  					      <el-input v-model="row.inventoryname"></el-input>
		  					    </el-form-item>
		  					    <el-form-item label="商品数量" prop="inventorynum">
		  					      <el-input v-model.number="row.inventorynum"></el-input>
		  					    </el-form-item>
		  					    <el-form-item label="商品价格" prop="inventoryprice">
		  					      <el-input v-model.number="row.inventoryprice"></el-input>
		  					    </el-form-item>
		  					    <el-form-item label="生产日期" prop="dataofproduced">
		  					      <el-input v-model="row.dataofproduced"></el-input>
		  					    </el-form-item>
		  					    <el-form-item label="保质期" prop="databaozhi">
		  					      <el-input v-model.number="row.databaozhi"></el-input>
		  					    </el-form-item>
		  					    <el-form-item label="商品厂商" prop="manufactory">
		  					      <el-input v-model="row.manufactory"></el-input>
		  					    </el-form-item>
		  					    <el-form-item label="商品产地" prop="inventoryaddress">
		  					      <el-input v-model="row.inventoryaddress"></el-input>
		  					    </el-form-item>
		  					  </el-form>
		  					  <span slot="footer" class="dialog-footer">
		  					    <el-button @click="istrue2 = false">取 消</el-button>
		  					    <el-button type="primary" @click="update1">确 定</el-button>
		  					  </span>
		  					</el-dialog>
		  					
		  				</template>
		  					
		  			  </el-table-column>
		  			  
		    </el-table>
		  			
		  	<el-pagination
		  		background
		  		@size-change="size_change"
		  		@current-change="current_change"
		  		:current-page=pageNum 
		  		:page-size = 5
		  		layout="prev, pager, next"
		  		:total= "total">
		  	</el-pagination>
	  </el-main>
	</el-container>
</template>

<script>
	export default {
		name: 'inventorymanage',
		data() {
			return {
				inventorydate: [],
				total: 0,
				pageNum: 1,
				searchdata: "",
				istrue2: false,
				istrue3: false,
				search2: [],
				row: {
					index: '',
					inventoryid: '',
					inventoryname: '',
					inventorynum: '',
					inventoryprice:'',
					dataofproduced: '',
					databaozhi: '',
					manufactory: '',
					inventoryaddress: '',
				},
				
			}
		},
		methods:{
			display() {
				var url = "http://localhost:8848/inventory/display?pagenum="+this.pageNum;
				// console.log(url);
				this.$axios.get(url)
					.then( (resp) => {
						var u = resp.data;
						this.inventorydate = u.list;
						
						this.pageNum = u.pageNum;
						this.total = u.total;
						// console.log(u.list);
						
						// console.log(this.inventorydate);
					})
					.catch( (err) => {
						console.log("error=", err);
					})
			},
			search() {
				
				var url="http://localhost:8848/inventory/search?inventoryid="+this.searchdata+"&inventoryname="+this.searchdata;
				
				this.$axios.get(url)
				.then( (resp) => {
					var u = resp.data;
					
					if (u != null) {
						// console.log(u);
						this.istrue3 = true;
						this.search2 = u;
					}
					else {
						this.$message.error("查询失败");
					}
				})
				.catch( (err) => {
					console.log("error=", err);
				})
			},
			Delete(index, id) {
				var url="http://localhost:8848/inventory/delete?inventoryid="+id;
				
				this.$axios.get(url)
				.then( (resp) => {
					var u = resp.data;
					
					if (u == 1) {
						this.$message.success("删除成功");
						this.display();
					}
					else if (u == 0) {
						this.$message.error("删除失败");
					}
				})
				.catch( (err) => {
					console.log("error=", err);
				})
			},
			update(index, row) {
				this.istrue2 = true;
				this.row.index = index;
				this.row.inventoryid = row.inventoryid;
				this.row.inventoryname = row.inventoryname;
				this.row.inventorynum = row.inventorynum;
				this.row.inventoryprice = row.inventoryprice;
				this.row.dataofproduced = row.dataofproduced;
				this.row.databaozhi = row.databaozhi;
				this.row.manufactory = row.manufactory;
				this.row.inventoryaddress = row.inventoryaddress;
				console.log(row.inventoryname);
				console.log(this.row);
			},
			update1() {
				this.$axios.post("http://localhost:8848/inventory/update", this.$qs.stringify({
					inventoryid: this.row.inventoryid,
					inventoryname: this.row.inventoryname,
					inventorynum: this.row.inventorynum,
					inventoryprice: this.row.inventoryprice,
					dataofproduced: this.row.dataofproduced,
					databaozhi: this.row.databaozhi,
					manufactory: this.row.manufactory,
					inventoryaddress: this.row.inventoryaddress,
				}))
				.then( (resp) => {
					var u = resp.data;
					
					if (u == 1) {
						this.$message.success("修改成功");
						this.inventorydate[this.row.index].inventoryname = this.row.inventoryname
						this.inventorydate[this.row.index].inventorynum = this.row.inventorynum
						this.inventorydate[this.row.index].inventoryprice = this.row.inventoryprice
						this.inventorydate[this.row.index].dataofproduced = this.row.dataofproduced
						this.inventorydate[this.row.index].databaozhi = this.row.databaozhi
						this.inventorydate[this.row.index].manufactory = this.row.manufactory
						this.inventorydate[this.row.index].inventoryaddress = this.row.inventoryaddress
						this.display()
					}
					else if (u == 0) {
						this.$message.error("修改失败请重试");
					}
				})
				.catch( (err) => {
					console.log("error=", err);
				})
				this.istrue2 = false;
			},
			handleClose(done) {
			        this.$confirm('确认关闭？')
			          .then(_ => {
			            done();
			          })
			          .catch(_ => {});
			      },
			//监听 pagesize 改变的事件
			   size_change(newSize){
			       this.pageSize = newSize
				   // this.inventorydate.push(this.pagelist);
				   console.log(newSize);
			   },
			   //监听 页码值 改变的事件
			   current_change(newPage){
			       this.pageNum = newPage
			       //this.comeindata.push(this.pagelist);
			       console.log(newPage);
				   this.display();
			   },
		},
		mounted() {
			this.$nextTick(() => {
			      setInterval(this.display(), 5000);
			    });

		}
	}
	
</script>

<style>
</style>
